<template>
	<view>
		<view class="cu-bar bg-white search" @click="addnewgroup">
			<text class="lg text-white cuIcon-add" style="font-size: 40upx; margin-left: 30upx; color: #333;">创建群</text>
		</view>
		<scroll-view :scroll-y="modalName==null" class="page" style="height:calc(100vh - 200upx)" :class="modalName!=null?'show':''">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 消息列表
				</view>
			</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item,key) in grouplist" :key="key" @click="clicktochat(item,key)">
					<!-- <view class="cu-avatar round lg" :style="'background-image:url('+item.avatar+');'">
						<view class="cu-tag badge">99+</view>
					</view> -->
					<view class="content">
						<view class="text-grey">
							<view class="text-cut">{{item.name}}</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								{{item.introduction}}
							</view>
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">22:20</view>
						<view class="cuIcon-notice_forbid_fill text-gray"></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				cuIconList: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '录像'
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '图像'
				}, {
					cuIcon: 'noticefill',
					color: 'olive',
					badge: 22,
					name: '通知'
				}, {
					cuIcon: 'upstagefill',
					color: 'cyan',
					badge: 0,
					name: '排行榜'
				}, {
					cuIcon: 'clothesfill',
					color: 'blue',
					badge: 0,
					name: '皮肤'
				}, {
					cuIcon: 'discoverfill',
					color: 'purple',
					badge: 0,
					name: '发现'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '帮助'
				}, {
					cuIcon: 'commandfill',
					color: 'purple',
					badge: 0,
					name: '问答'
				}, {
					cuIcon: 'brandfill',
					color: 'mauve',
					badge: 0,
					name: '版权'
				}],
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				getMsgbox: false,
				listTouchStart: 0,
				listTouchDirection: null,
				grouplist: []
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'addgroup', 'msgboxgroup'])

		},
		///监听好友上下线
		watch: {
			addgroup: function(val) {
				console.log(val);
				if(this.userInfo.data.group){
					this.grouplist = this.userInfo.data.group;
				}
				this.$forceUpdate() //二维数组，开启强制渲染
			},
			msgboxgroup: function(val) {
				this.getMsgbox = true;
			}

		},
		onShow() {
			if(this.userInfo){
				this.grouplist = this.userInfo.data.group;
			}
		},
		onLoad() {
			// #ifndef H5
			uni.showShareMenu({
				showShareItems : ['qq', 'qzone', 'wechatFriends', 'wechatMoment']	
			});
			// #endif
			
			this.getGroupList();
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
			MenuBorder(e) {
				this.menuBorder = e.detail.value
			},
			MenuArrow(e) {
				this.menuArrow = e.detail.value
			},
			MenuCard(e) {
				this.menuCard = e.detail.value
			},
			SwitchSex(e) {
				this.skin = e.detail.value
			},

			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			addnewgroup(e) {
				uni.navigateTo({
					url: "addgroup"
				})
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			clicktochat(item, sub) {
				console.log( item,this.$TIM.TYPES.CONV_C2C , this.$TIM.TYPES.CONV_GROUP);
				item.user = item.name;
				//
				this.$store.commit('updateToUserInfo', item );
				//
				this.$store.commit('createConversationActive', {
					toUserId : item.groupID,
					type : this.$TIM.TYPES.CONV_GROUP
				})
				uni.navigateTo({
					url: "/pages/tim/room?conversationType=" + this.$TIM.TYPES.CONV_GROUP
				})
			},
			gotojoingroup(e) {
				uni.navigateTo({
					url: "joingroup"
				})
			},
			gotomsgbox() {
				this.getMsgbox = false;
				uni.navigateTo({
					url: "../msgbox/msgbox"
				})
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			getGroupList(){
				// 该接口默认只会拉取这些资料：群类型、群名称、群头像、最后一条消息的时间。
				const that = this;
				let promise = this.tim.getGroupList();
				promise.then(function(imResponse) {
				  console.log(imResponse.data.groupList); // 群组列表
				  that.grouplist = imResponse.data.groupList;  //这里报错了
				}).catch(function(imError) {
				  console.warn('getGroupList error:', imError); // 获取群组列表失败的相关信息
				});
				console.log(this.grouplist)
				
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("css/main.css");
	@import url("css/icon.css");
	
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
